import React, { Component } from 'react';
import { defaultValue } from "./js/defaultValue";

// 引入富文本
console.log(window.tinymce);
const tinymce = window.tinymce;

class EditTinymceComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            content: ""
        }
    }
    componentDidMount() {
        tinymce.init({
            // 选定元素
            selector: '#editor',
            // 内联模式
            inline: false,
            // 不显示Powered by Tiny字样
            branding: false,
            // 中文
            language: 'zh_CN',
            // 引入部分需要自定义的css。相对于静态资源的路径
            content_css: './editor/css/content.css',
            // 编译框高度
            height: 600,
            // 插件
            // 部分功能是付费服务。没有key不会启用，工具栏功能会依赖这些插件
            plugins: [
                'advlist autolink codesample link image lists charmap print preview hr anchor pagebreak searchreplace',
                'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking',
                'save table directionality emoticons template paste fullscreen'
            ],
            // 工具栏
            // 撤销 恢复 搜索替换 | 样式 | 加粗 斜体 | 字体颜色 背景颜色 表情 | 对齐方式 | 有序 无序 缩进 | 连接 图片 表格 代码编译 | 打印 预览 | 全屏
            toolbar: 'undo redo searchreplace | styleselect | bold italic | forecolor backcolor emoticons | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image table codesample| print preview | fullscreen',
            // 显示的不可见字符的功能（空格回车）
            // visualchars_default_state: true,
            // visualblocks_default_state: true,
            // 上传地址
            images_upload_url: 'http://10.1.70.62:8000/uploadImg/uploadImgTinymce',
            // 图片高级配置
            image_advtab: true,
            image_uploadtab: true,
            // 代码编译语言
            codesample_languages: [
                { text: 'Java', value: 'java' },
                { text: 'JavaScript', value: 'javascript' },
                { text: 'C', value: 'c' },
                { text: 'C#', value: 'csharp' },
                { text: 'C++', value: 'cpp' },
                { text: 'HTML/XML', value: 'markup' },
                { text: 'CSS', value: 'css' },
                { text: 'PHP', value: 'php' },
                { text: 'Ruby', value: 'ruby' },
                { text: 'Python', value: 'python' }
            ],
            // 监听事件
            init_instance_callback: (editor) => {
                editor.on('change', (e) => {
                    console.log('change', e);
                    console.log('e', e.target.getContent());
                    this.setState({
                        content: e.target.getContent()
                    })
                });
            }
        }).then((res) => {
            console.log('did init');
            tinymce.activeEditor.selection.setContent(defaultValue);
        });
    };


    submit = () => {
        console.log('submit');
        console.log(this.state.content);
    }

    render() {
        return (
            <div id="EditDraftEditorComponents">
                <button onClick={() => { this.submit() }}>提交</button>
                <div>
                    <textarea name="editor" id="editor"></textarea>
                </div>
            </div>
        );
    }
}

export default EditTinymceComponent;